<template>
  <div>

    <a-dropdown>
      <a-tooltip>
        <template #title>点击复制店铺名称</template>
        <div class="ant-dropdown-link" @click="copyShopName">
          店铺名称
          <DownOutlined />
        </div>
      </a-tooltip>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a-tooltip placement="right">
              <template #title>点击复制旺旺号</template>
              <div @click="copyWW">
                <CopyOutlined />
                旺旺号
              </div>
            </a-tooltip>
          </a-menu-item>
          <a-menu-item>
            <a-tooltip placement="right">
              <template #title>点击复制店铺链接</template>
              <div @click="copyShopUrl">
                <CopyOutlined />
                店铺链接
              </div>
            </a-tooltip>
          </a-menu-item>
          <a-menu-item>
            <a-tooltip placement="right">
              <template #title>点击复制店铺图标</template>
              <div @click="copyShopIcon">
                <CopyOutlined />
                店铺图标
              </div>
            </a-tooltip>
          </a-menu-item>
          <a-menu-item>
            <a-tooltip placement="right">
              <template #title>点击复制店铺ID</template>
              <div @click="copyShopId">
                <CopyOutlined />
                店铺ID
              </div>
            </a-tooltip>
          </a-menu-item>
          <a-menu-item>
            <a-tooltip placement="right">
              <template #title>点击复制品牌ID</template>
              <div @click="copyBrandValueId">
                <CopyOutlined />
                品牌ID
              </div>
            </a-tooltip>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from 'vue';
import { DownOutlined, CopyOutlined } from '@ant-design/icons-vue';
import {isLogin} from '~/logic'
import { $itemType } from '~/contentScripts/views/tao/detail/components/commodityData/index'
import {message} from 'ant-design-vue'

const emit = defineEmits(['login'])
const __option = getCurrentInstance()?.appContext.provides.option;
const getItem = () => {
  const instance = getCurrentInstance();
  const item = (instance?.proxy as { $item?: any }).$item ?? {};
  return item;
}
const item = getItem()

const shopName = ref('')
const ww = ref('')
const shopUrl = ref('')
const shopIcon = ref('')
const shopId = ref('')
const brandValueId = ref('')

const getData = async() => {
  if (isLogin({emit}, __option)) {
    const res: $itemType = await  item.getDetail()
    shopName.value = res.seller.shopName
    ww.value = res.seller.sellerNick
    shopUrl.value = `https://shop${res.seller.shopId}.taobao.com`
    shopIcon.value = res.seller.shopIcon
    shopId.value = res.seller.shopId
    brandValueId.value = res.item.brandValueId
  }
}

const copyShopName = () => {
  if (!shopName.value) return message.error('未获取到店铺名称 || 店铺名称为空')
  navigator.clipboard.writeText(shopName.value).then(() => {
    message.success('复制店铺名称成功')
  }).catch(err => {
    message.error('复制店铺名称失败')
  });
}
const copyWW = () => {
  if (!ww.value) return message.error('未获取到旺旺号名称 || 旺旺号名称为空')
  navigator.clipboard.writeText(ww.value).then(() => {
    message.success('复制旺旺号成功')
  }).catch(err => {
    message.error('复制旺旺号失败')
  });
}

const copyShopUrl = () => {
  if (!shopUrl.value) return message.error('未获取到店铺链接名称 || 店铺链接名称为空')
  navigator.clipboard.writeText(shopUrl.value).then(() => {
    message.success('复制店铺链接成功')
  }).catch(err => {
    message.error('复制店铺链接失败')
  });
}

const copyShopIcon = () => {
  if (!shopIcon.value) return message.error('未获取到店铺图标名称 || 店铺图标名称为空')
  navigator.clipboard.writeText(shopIcon.value).then(() => {
    message.success('复制店铺图标成功')
  }).catch(err => {
    message.error('复制店铺图标失败')
  });
}

const copyShopId = () => {
  if (!shopId.value) return message.error('未获取到店铺ID || 店铺ID为空')
  navigator.clipboard.writeText(shopId.value).then(() => {
    message.success('复制店铺ID成功')
  }).catch(err => {
    message.error('复制店铺ID失败')
  });
}

const copyBrandValueId = () => {
  if (!brandValueId.value) return message.error('未获取到品牌ID || 品牌ID为空')
  navigator.clipboard.writeText(brandValueId.value).then(() => {
    message.success('复制品牌ID成功')
  }).catch(err => {
    message.error('复制品牌ID失败')
  });
}


onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>

</style>